<?php
$imagepath = $this->webroot.'maps/images/'.$Mapsystemparam;
echo $html->script('jquery.iviewer');
echo $html->script('jquery.mousewheel.min');
echo $html->css('jquery.iviewer');

?>
<style>
.viewer
{
	width: 100%;
	height: 650px;
	border: 1px none black;
	position: relative;
}

.wrapper
{
	overflow: hidden;
	margin-left:5px;
	margin-right:5px;
}
</style>

<?php
?>
<script type="text/javascript">
var $ = jQuery;
var iviewer = {};
$(document).ready(function(){
	$("#viewer").iviewer(
	{
		src: "<?php echo $imagepath;?>", 
		update_on_resize: false,
		/*zoom: 200, */
		initCallback: function ()
		{
			var object = this;
			ui_disabled = true;
			$("#in").click(function(){ object.zoom_by(1);}); 
			$("#out").click(function(){ object.zoom_by(-1);}); 
			$("#fit").click(function(){ object.fit();}); 
			$("#orig").click(function(){  object.set_zoom(100); }); 
			$("#update").click(function(){ object.update_container_info();});
			iviewer = this;
			},
		onMouseMove: function(object, coords) { },
		onStartDrag: function(object, coords) { return false; }, //this image will not be dragged
		onDrag: function(object, coords) { }
		});
	});
</script>
<div class="opaque wrapper">
<span>
<a id="in" href="#">+</a>
<a id="out" href="#">-</a>
<a id="fit" href="#">fit</a>
<a id="orig" href="#">orig</a>
<a id="update" href="#">update</a>
</span>
<div class="viewer" id="viewer">
</div>
<br />
</div>
<center><a href="https://github.com/can3p/iviewer/wiki" target="_blank">iViewer for Jquery</a></center>